import { useRootStore } from '../stores/rootStore'
import { observer } from 'mobx-react-lite'
function Header(){
  const {todoListStore } =useRootStore()
  return (
    <div className="appleBusket">
        <div className="title">苹果篮子</div>

        <div className="stats">
          <div className="section">
            <div className="head">当前</div>
            <div className="content">
              {todoListStore.filterAllNum}个苹果，{todoListStore.filterAllGram}克
            </div>
          </div>
          <div className="section">
            <div className="head">已吃掉</div>
            <div className="content">
             {todoListStore.filterEatNum}个苹果，{todoListStore.filterEatGram}克
            </div>
          </div>
        </div>
        </div>
  )
}
export default observer(Header)